<template>
  <div class="food-step-form">
    <div class="button-container">
      <el-button type="primary" @click="addClick">新增</el-button>
    </div>

    <el-table :data="foodStore.currentRecipe.stepList"
              border stripe @row-click="handleRowClick" class="food-step-table">
      <el-table-column type="index" align="center" width="40" />
      <el-table-column prop="content" label="内容" align="center" min-width="20%" />
      <el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
        <template #default="scope">
          <el-image v-if="scope.row.imageUrl" :src="serviceFileRootPath + scope.row.imageUrl" />
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food'
import type { IStep } from '@/types/food'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { serviceFileRootPath } from '@/utils'

const foodStore = useFoodStore()

const addClick = () => {
  foodStore.stepApiType = 'ADD'
  // foodStore.foodStepImageList = []
  foodStore.stepDialog = {
    title: '新增步骤',
    visible: true,
    data: foodStore.getEmptyStep()
  }
}

const handleRowClick = (row: IStep) => {
  foodStore.editStepIndex = foodStore.currentRecipe.stepList.indexOf(row)
  foodStore.stepApiType = 'UPDATE'
  foodStore.stepDialog = {
    title: '编辑步骤',
    visible: true,
    data: deepCopyObject(row)
  }
}
</script>

<style lang="scss">
.food-step-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;

  .food-step-table {
    .el-image {
      width: 100%;
      height: 100%;

      max-height: 200px;
      max-width: 200px;
    }
  }
}
</style>
